<template>
    <a-date-picker v-model:value="dayjsValue" v-bind="$attrs" style="width: 100%" :format="props.format">
        <template #suffixIcon>
            <slot v-if="props.withIcon" name="suffixIcon">
                <CalendarOutlined />
            </slot>
            <span v-else></span>
        </template>
    </a-date-picker>
</template>
<script setup>
import { computed } from 'vue';
import dayjs from 'dayjs';

const props = defineProps({
    format: {
        type: String,
        default: 'YYYY-MM-DD'
    },
    withIcon: {
        type: Boolean,
        default: true
    }
});
const value = defineModel('value', {
    type: String,
    default: ''
});
const dayjsValue = computed({
    get: () => {
        return (value.value === '' || value.value === '1970-1-1') ? '' : dayjs(value.value, props.format);
    },
    set: (newValue) => {
        value.value = (newValue && newValue !== '' && newValue !== '1970-1-1') ? newValue.format(props.format) : '1970-1-1';
    }
});
</script>